<template>
  <view>
    <view class="goods-list">
      <view
        class="goods-item"
        v-for="(item, index) in productList"
        :key="index"
        @click="goProductDetail(item)"
      >
        <!-- 商品左侧图片区域 -->
        <view class="goods-item-left">
          <image
            :src="item.goods_small_logo || defaultImage"
            class="goods-pic"
          ></image>
        </view>

        <!-- 商品右侧信息区域 -->
        <view class="goods-item-right">
          <!-- 商品标题 -->
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-info-box">
            <!-- 商品价格 -->
            <!-- | 管道符 -->
            <view class="goods-price">{{
              item.goods_price | formatPrice
            }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 1. 查询参数对象
      params: {
        query: "", // 查询关键字
        cid: "", // 商品分类的id
        pagenum: 1, // 当前页
        pagesize: 10, // 每次请求的商品数量
      },
      // 2. 商品数组
      productList: [],
      // 3. 商品的总条数
      total: 0,
      // 4. 商品的默认图片
      defaultImage:
        "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png",
      // 5. 是否正在请求数据
      isLoading: false,
    };
  },
  onLoad({ query, cid }) {
    // console.log(query, cid);
    this.params.query = query || "";
    this.params.cid = cid || "";
    // console.log(this.params);

    this.getProductList();
  },
  // 下拉刷新触发
  async onPullDownRefresh() {
    // 重置一些关键数据
    this.params.pagenum = 1;
    this.productList = [];
    // 调用请求数据函数
    await this.getProductList();
    // 关闭下拉刷新(等前面的异步函数执行完毕)
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 判断: 数据是否加载完毕
    if (this.productList.length === this.total) {
      return this.$msg("没有更多商品数据了...");
    }

    // 判断: 是否正在请求数据(如果正在请求, 则不往后执行)
    if (this.isLoading) {
      return;
    }

    // console.log("我被执行了, 在距离底部还有50px时");
    this.params.pagenum++;
    this.getProductList();
  },
  methods: {
    // 1. 获取商品列表
    async getProductList() {
      this.isLoading = true;

      try {
        const { meta, message } = await this.$http.get(
          "/goods/search",
          this.params
        );
        // console.log(meta, message);
        // 请求失败处理
        if (meta.status !== 200) {
          this.isLoading = false;
          return this.$msg();
        }

        this.productList = [...this.productList, ...message.goods];
        this.total = message.total;
      } catch (error) {
        // 只有pagenum的值>1时, 如果请求失败则页面-1
        if (this.params.pagenum > 1) {
          this.params.pagenum -= 1;
        }
      } finally {
        // 无论请求成功还是失败, 都要关闭节流阀
        this.isLoading = false;
      }
    },
    // 2. 跳转到商品详情页
    goProductDetail(item) {
      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${item.goods_id}`,
      });
    },
  },
  // 写过滤器
  filters: {
    // formatPrice(value) {
    //   // console.log(value); // '199'
    //   return `¥${Number(value).toFixed(2)}`;
    // },
  },
};
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
